<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/StakeholderTemplate.xhtml">

    <ui:define name="contentInsert">
          <h3>Modify Performance</h3>
                <h:form id="eventUpdateForm">
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                    </p:ajaxStatus>
                    <p:dataTable value="#{stakeholderPerformanceMB.getAllEvents()}" var="event"
                        onRowSelectUpdate="eventUpdateForm" selectionMode="single"
                        selection="#{stakeholderPerformanceMB.eventHelper}" 
                        rowSelectListener="#{stakeholderPerformanceMB.updateSelectedEventFields()}"
                        styleClass="order-table" paginator="true" rows="5"
                        >
                        <p:column>
                            <f:facet name="header">Event ID</f:facet>
                            <h:outputText id="eventId" value="#{event.id}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">Name</f:facet>
                            <h:outputText id="eventName" value="#{event.eventName}" />
                        </p:column>

                        <h:inputHidden id="eventDescription" value="#{event.description}"  />
                        
                        <h:inputHidden id="posterPath" value="#{event.poster}" />

                        <p:column>
                            <f:facet name="header">Rating</f:facet>         
                            <h:outputText id="eventRating" value="#{event.rating}" />
                        </p:column>

                        <p:column>
                            <f:facet name="header">Language</f:facet>
                            <h:outputText id="eventLanguage" value="#{event.language}" />
                        </p:column>
    
                        <p:column>
                            <f:facet name="header">Type</f:facet>
                            <h:outputText id="eventGenre" value="#{event.genre}" />
                        </p:column>

                        <p:column>
                            <f:facet name="header">Duration</f:facet>
                            <h:outputText id="eventDuration" value="#{event.duration}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">Start Date</f:facet>
                            <h:outputText id="eventStartDate" value="#{event.startDate}" />
                        </p:column>

                        <p:column>
                            <f:facet name="header">End Date</f:facet>
                            <h:outputText id="eventEndDate" value="#{event.endDate}" />
                        </p:column>
                        
                    </p:dataTable>
                    <br/>

                    <h3>Click on a row above to edit an event</h3>
                    <p:panel id="panel" >
                        <p:ajaxStatus style="width:16px;height:16px;">
                            <f:facet name="start">
                                <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                            </f:facet>
                            <f:facet name="complete">
                                <h:outputText value="" />
                            </f:facet>
                        </p:ajaxStatus>
                        <p:messages />
                        <h:panelGrid columns="2" border="0">
                            <h:outputLabel for="eventName" value="Name:"/>
                            <p:inputText required="true" requiredMessage="Event name is required!"
                                         id="eventSelectedName" value="#{stakeholderPerformanceMB.eventName}" style="width: 500px"/>

                            <h:outputLabel for="posterPath" value="Poster: "/>
                            <p:graphicImage value="#{stakeholderPerformanceMB.posterPath}" width="100" height="100"/>
                            <h:outputText value="Upload Image: "/><br/>
                            <h:form enctype="multipart/form-data" prependId="false">
                                <p:fileUpload fileUploadListener="#{photoManagedBean.handleEventPhotoUpload}" multiple="false" label="Browse" auto="true" allowTypes="*.jpg;*.png;*.gif;" description="Images" update="eventUpdateForm:pic" />
                            </h:form>


                            <br/>
                            <p:graphicImage id="pic" value="./../../#{photoManagedBean.photoFilePath}" height="100"
                                            width="100"/><br/>
                            
                            <h:outputText value="(Please use a gif/jpeg/jpg image file.)" style="font-style: italic"/>
                            <h:outputText value=""/>
                            <h:outputLabel for="eventRating" value= "Rating: "/>
                            <h:selectOneMenu id="eventSelectedRating" style="width: 260px" value="#{stakeholderPerformanceMB.eventRating}" required="true" requiredMessage="Rating is required!">
                                <f:selectItem itemLabel="" itemValue= ""/>
                                <f:selectItem itemLabel="General" itemValue="General"/>
                                <f:selectItem itemLabel="Advisory" itemValue="Advisory"/>
                                <f:selectItem itemLabel="R18" itemValue="R18"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="eventLanguage" value="Language:"/>
                            <p:inputText required="true" requiredMessage="Language is required!"
                                         id="eventSelectedLanguage" value="#{stakeholderPerformanceMB.eventLanguage}"/>

                            <h:outputLabel for="eventType" value="Type:"/>
                            <h:selectOneMenu id="eventSelectedType" style="width: 260px" value="#{stakeholderPerformanceMB.eventType}" required="true" requiredMessage="Type is required!">
                                <f:selectItem itemLabel="" itemValue= ""/>
                                <f:selectItem itemLabel="Concert" itemValue="Concert"/>
                                <f:selectItem itemLabel="Dance" itemValue="Dance"/>
                                <f:selectItem itemLabel="Musical" itemValue="Musical"/>
                                <f:selectItem itemLabel="Theatre" itemValue="Theatre"/>
                                <f:selectItem itemLabel="Others" itemValue="Others"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="eventGenre" value="Genre:"/>
                            <h:selectOneMenu id="eventSelectedGenre" style="width: 260px" value="#{stakeholderPerformanceMB.eventGenre}" required="true" requiredMessage="Genre is required!">
                                <f:selectItem itemLabel="" itemValue= ""/>
                                <f:selectItem itemLabel="Comedy" itemValue="Comedy"/>
                                <f:selectItem itemLabel="Horror" itemValue="Horror"/>
                                <f:selectItem itemLabel="Thriller" itemValue="Thriller"/>
                                <f:selectItem itemLabel="Family" itemValue="Family"/>
                                <f:selectItem itemLabel="Drama" itemValue="Drama"/>
                                <f:selectItem itemLabel="Rock" itemValue="Rock"/>
                                <f:selectItem itemLabel="Pop" itemValue="Pop"/>
                                <f:selectItem itemLabel="Rhythms and Blues" itemValue="Rhythms and Blues"/>
                                <f:selectItem itemLabel="Others" itemValue="Others"/>
                            </h:selectOneMenu>

                            <h:outputLabel for="eventDuration" value="Duration:"/>
                            <p:inputText required="true" requiredMessage="Duration is required!"
                                         id="eventSelectionDuration" value="#{stakeholderPerformanceMB.eventDuration}"/>
                            <h:outputText value="(Note: Duration is in minutes.)" style="font-style: italic"/>
                            <br/>
                            <h:outputLabel for="eventStartDate" value= "Start Date:"/>
                            <p:calendar id="eventSelectionStartDate" value="#{stakeholderPerformanceMB.eventStartDate}" mindate="#{stakeholderPerformanceMB.findingMinDate()}" maxdate="#{stakeholderPerformanceMB.findingMaxDate()}" pattern="dd/MM/yyyy" required="true" requiredMessage="Start Date is required!"/>

                            <h:outputLabel for="eventEndDate" value="End Date:"/>
                            <p:calendar id="eventSelectEndDate" value="#{stakeholderPerformanceMB.eventEndDate}" mindate="#{stakeholderPerformanceMB.findingMinDate()}" maxdate="#{stakeholderPerformanceMB.findingMaxDate()}" pattern="dd/MM/yyyy" required="true" requiredMessage="End Date is required!"/>

                            <h:outputLabel for="eventDescription" value= "Description: "/>
                            <p:inputTextarea required="true" requiredMessage="Description required!"
                                             id="eventSelectDescription" value="#{stakeholderPerformanceMB.eventDescription}" style="width: 550px; height: 120px">
                            </p:inputTextarea>
                        </h:panelGrid>
                        <br/>
                        <h:commandButton id="submitEvent" value="Modify Event" onclick="if (!confirm('Are you sure you want to modify this event?')) return false"
                                         action="#{stakeholderPerformanceMB.modifyEvent(event)}" >
                            <f:setPropertyActionListener target="#{stakeholderPerformanceMB.posterPath}" value="#{photoManagedBean.photoFilePath}" />
                         </h:commandButton>
                    </p:panel>
                    
                </h:form>
            </ui:define>
</ui:composition>

